<template>
    <div id="health-info">
        <el-breadcrumb class="common-bread">
            <el-breadcrumb-item :to="{ path: '/healthRecord' }">健康数据分析</el-breadcrumb-item>
            <el-breadcrumb-item>健康数据详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="contentBox">
            <div class="list_head">
                <span class="head_name">基本信息</span>
                <el-button class="list_btn" type="primary" @click="cancle()">返回</el-button>
            </div>
            <div class="student-infos">
                <span class="stu-infoitem">学生姓名</span>
                <span class="stu-infoitem">{{name}}</span>
                <span class="stu-infoitem">学生编号</span>
                <span class="stu-infoitem">{{studentNumber}}</span>
                <span class="stu-infoitem">性别</span>
                <span class="stu-infoitem">{{gender}}</span>
                <span class="stu-infoitem">班级</span>
                <span class="stu-infoitem">{{className}}</span>
            </div>
            <div v-if="hasPhysicalScore" class="physical-infos">
                <div class="infos_head">
                    <span class="head_name">体测成绩</span>
                </div>
                <div style="overflow:hidden;">
                    <div class="can-box">
                        <canvas id="phyScore" width="240" height="240">
                            <p>抱歉，您的浏览器不支持canvas</p>
                        </canvas>
                        <span class="phy-total">总分</span>
                        <img class="phy-wave" src="../../assets/phy_wave.png">
                        <span class="phy-level">体测成绩：<span style="color:#40A9FF;">{{physicalScore}}</span></span>
                    </div>
                    <div class="physcore-box">
                        <div v-for="item in physicalMark" v-if="item.mark || item.score" class="mark-item">
                            <div class="mark-key">{{item.physicalName}}</div>
                            <div class="mark-value">
                                <span v-if="item.mark">{{item.mark}}</span>
                                <span v-if="item.score">（{{item.score}}）</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="health-infobox">
                <div class="infos_head">
                    <span class="head_name">健康数据</span>
                    <el-date-picker v-model="date" type="date" placeholder="选择日期" @change="getHealthInfo" :picker-options="myPickerOptions"></el-date-picker>
                    <span class="fr" @click="instructions">查看手环说明书</span>
                </div>
                <div class="health-infocon">
                    <el-row>
                        <el-col :span="9">
                            <p class="linehei">睡眠</p>
                            <div v-if="hasSleepData">
                                <p class="linehei"><span class="color-gray">入睡时间：</span>{{sleepData.sleepStartTime}}</p>
                                <p class="linehei"><span class="color-gray">睡眠时长：</span>{{sleepData.sleepTotal}}</p>
                                <p class="linehei"><span class="color-gray">深睡比例：</span>{{sleepData.depthPercent}}%</p>
                                <p class="linehei"><span class="color-gray">清醒次数：</span>{{sleepData.wakeUpCount}}次</p>
                                <div class="linehei">
                                    <span class="color-gray">深睡时间：</span>
                                    <span class="light-sleep" :style="'width:'+ sleepData.depthSleepLen +'px;'"></span>
                                    <span class="light-sleep-time">{{sleepData.depthSleepTotal}}</span>
                                </div>
                                <div class="linehei">
                                    <span class="color-gray">浅睡时间：</span>
                                    <span class="deep-sleep" :style="'width:'+ sleepData.shallowSleepLen +'px;'"></span>
                                    <span class="deep-sleep-time">{{sleepData.shallowSleepTotal}}</span>
                                </div>
                            </div>
                            <div class="nodetaildata" v-else>数据不完整，无法统计</div>
                        </el-col>
                        <el-col :span="8">
                            <p class="linehei">心率（次/分钟）</p>
                            <div v-if="hasHeartRateData">
                                <p class="linehei"><span class="color-gray">平均心率：</span>{{heartRateData.averageHeartRate}}</p>
                                <div style="padding: 10px 0;">
                                    <div class="acrate-top">
                                        <div :class="backc + ' acrate-top-con'" :style="'left:'+leftposition + 'px;'">
                                            <span>{{heartRateData.averageHeartRate}}</span>
                                            <div :class="backc + ' sanjiao'"></div>
                                        </div>
                                    </div>
                                    <div class="acrate-middle">
                                        <div class="art-item">心率过缓</div>
                                        <div class="art-item">心率正常</div>
                                        <div class="art-item">心率过快</div>
                                    </div>
                                    <div class="acrate-bottom">
                                        <span>0</span>
                                        <span>60</span>
                                        <span>100</span>
                                        <span>200</span>
                                    </div>
                                </div>
                                <p class="linehei"><span class="color-gray">最低心率：</span>{{heartRateData.minHeartRate}}</p>
                                <p class="linehei"><span class="color-gray">最高心率：</span>{{heartRateData.maxHeartRate}}</p>
                            </div>
                            <div class="nodetaildata" v-else>数据不完整，无法统计</div>
                        </el-col>
                        <el-col :span="7">
                            <p>运动步数</p>
                            <div v-show="hasStepData" class="sport-box">
                                <canvas id="sport-step" width="240" height="240">
                                    <p>抱歉，您的浏览器不支持canvas</p>
                                </canvas>
                                <span class="sportstep-title">运动步数</span>
                            </div>
                            <div class="nodetaildata" v-show="!hasStepData">数据不完整，无法统计</div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                studentId: '',
                studentNumber: '',
                physicalId: '',
                physicalScore: '',
                leftposition: 0,
                backc: '',
                hasPhysicalScore: true,
                date: new Date(new Date().getTime() - 24 * 3600000).format('yyyy/MM/dd'),
                physicalMark: [
                    { physicalName: '身高', physicalItem: 'height', score: '', mark: '' },
                    { physicalName: '体重', physicalItem: 'weight', score: '', mark: '' },
                    { physicalName: 'BMI(体重÷身高＾2)', physicalItem: 'bmi', score: '', mark: '' },
                    { physicalName: '肺活量', physicalItem: 'vitalCapacity', score: '', mark: '' },
                    { physicalName: '50米跑', physicalItem: 'run50', score: '', mark: '' },
                    { physicalName: '立定跳远', physicalItem: 'standinglongjump', score: '', mark: '' },
                    { physicalName: '坐位体前屈', physicalItem: 'sitandreach', score: '', mark: '' },
                    { physicalName: '仰卧起坐', physicalItem: 'sitandup', score: '', mark: '' },
                    { physicalName: '引体向上', physicalItem: 'pullup', score: '', mark: '' },
                    { physicalName: '1000米跑', physicalItem: 'run1000', score: '', mark: '' },
                    { physicalName: '800米跑', physicalItem: 'run800', score: '', mark: '' },
                    { physicalName: '50*8往返跑', physicalItem: 'returnRun', score: '', mark: '' },
                    { physicalName: '一分钟跳绳', physicalItem: 'roleJump', score: '', mark: '' },
                    { physicalName: '标准分', physicalItem: 'total', score: '', mark: '' },
                    { physicalName: '附加分', physicalItem: 'extra', score: '', mark: '' },
                    { physicalName: '体测总分', physicalItem: 'computer', score: '', mark: '' },
                    { physicalName: '体测成绩', physicalItem: 'scoreLevel', score: '', mark: '' }
                ],
                sleepData: {},
                hasSleepData: false,
                heartRateData: {},
                hasHeartRateData: false,
                stepData: 0,
                hasStepData: false,
                name: '',
                className: '',
                gender: '',
                myPickerOptions: {
                    disabledDate: (time) => {
                        return time.getTime() > Date.now() - 8.64e7
                    }
                },
            }
        },
        mounted() {
            let healthInfo = JSON.parse(this.$util.getStore("healthInfo"));
            this.studentId = healthInfo.studentId;
            this.studentNumber = healthInfo.studentNumber;
            this.gender = healthInfo.gender == 1 ? '男' : '女';
            this.className = healthInfo.className;
            this.name = healthInfo.name;
            this.physicalId = healthInfo.physicalId;
            this.physicalScore = healthInfo.physicalScore;
            this.date = new Date(healthInfo.date).format('yyyy/MM/dd');
            this.getHealthInfo();

            if (healthInfo.physicalId && healthInfo.physicalScore) {
                this.getPhysicalScoreDetail();
            } else {
                this.hasPhysicalScore = false
            }
        },
        methods: {
            instructions() {
                location.href = `http://swapp-test-images.oss-cn-hangzhou.aliyuncs.com/band/%E5%81%A5%E5%BA%B7%E6%89%8B%E7%8E%AF%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E%E4%B9%A6.pdf`
            },
            cancle() {
                location.href = '/#/healthRecord'
            },
            // 获取成绩详情
            getPhysicalScoreDetail() {

                this.$axios.post('/jlp/physical/score/serach/oneperson', {
                    studentCode: this.studentNumber,
                    physicalId: this.physicalId || 45
                }).then(res => {
                    if (res.data.error == 10000) {
                        let proObj = res.data.data;
                        if (proObj) {
                            if (proObj.totalScore < 0) {
                                this.hasPhysicalScore = false
                            }
                            let prebmi = '', computerTotal = '';
                            if (proObj.run1000 == -100000) {
                                proObj.run1000 = ''
                            } else if (proObj.run1000 == -99999) {
                                proObj.run1000 = '未测'
                            } else {
                                proObj.run1000 = Math.floor(proObj.run1000 / 1000 / 60) + ' 分 ' + (proObj.run1000 / 1000) % 60 + ' 秒'
                            }

                            if (proObj.run800 == -100000) {
                                proObj.run800 = ''
                            } else if (proObj.run800 == -99999) {
                                proObj.run800 = '未测'
                            } else {
                                proObj.run800 = Math.floor(proObj.run800 / 1000 / 60) + ' 分 ' + (proObj.run800 / 1000) % 60 + ' 秒'
                            }

                            if (proObj.height == -100000) {
                                prebmi = '';
                            } else if (proObj.height == -99999) {
                                prebmi = '未测'
                            } else {
                                prebmi = ((proObj.weight / 1000) / ((proObj.height / 1000) * (proObj.height / 1000))).toFixed(2)
                            }

                            switch (proObj.scoreLevel) {
                                case 1:
                                    proObj.scoreLevel = '优秀'
                                    break;
                                case 2:
                                    proObj.scoreLevel = '良好'
                                    break;
                                case 3:
                                    proObj.scoreLevel = '及格'
                                    break;
                                case 4:
                                    proObj.scoreLevel = '不及格'
                                    break;
                                default:
                                    proObj.scoreLevel = ''
                            }

                            if (proObj.totalScore == -99999 || proObj.totalScore == -100000) {
                                computerTotal = '-99999'
                            } else {
                                computerTotal = (proObj.totalScore + proObj.extraScore) / 100 + '分'
                                this.toCanvas('phyScore', (proObj.totalScore + proObj.extraScore) / 100);
                            }

                            let phyObj = {
                                height: proObj.height / 10 + '厘米',
                                weight: (proObj.weight / 1000) + '千克',
                                bmi: prebmi,
                                bmiScore: proObj.bmiScore / 100 + '分',
                                vitalCapacity: proObj.vitalCapacity + ' 毫升',
                                vitalCapacityScore: proObj.vitalCapacityScore / 100 + '分',
                                run50: proObj.run50 / 1000 + ' 秒',
                                run50Score: proObj.run50Score / 100 + '分',
                                standinglongjump: proObj.standinglongjump / 10 + ' 厘米',
                                standinglongjumpScore: proObj.standinglongjumpScore / 100 + '分',
                                sitandreach: proObj.sitandreach / 10 + ' 厘米',
                                sitandreachScore: proObj.sitandreachScore / 100 + '分',
                                sitandup: proObj.sitandup + ' 个',
                                sitandupScore: proObj.sitandupScore / 100 + '分',
                                pullup: proObj.pullup + ' 个',
                                pullupScore: proObj.pullupScore / 100 + '分',
                                run1000: proObj.run1000,
                                run1000Score: proObj.run1000Score / 100 + '分',
                                run800: proObj.run800,
                                run800Score: proObj.run800Score / 100 + '分',
                                returnRun: proObj.returnRun / 1000 + ' 秒',
                                returnRunScore: proObj.returnRunScore / 100 + '分',
                                roleJump: proObj.roleJump + ' 个',
                                roleJumpScore: proObj.roleJumpScore / 100 + '分',
                                extraScore: proObj.extraScore / 100 + '分',
                                totalScore: proObj.totalScore / 100 + '分',
                                computerScore: computerTotal,
                                scoreLevel: proObj.scoreLevel
                            }
                            this.physicalScoreFormat(this.physicalMark, phyObj);

                        }
                    }
                })
            },
            // 成绩整理
            physicalScoreFormat(phyArr, phyObj) {
                phyArr.forEach(element => {
                    for (let i in phyObj) {
                        if (i == element.physicalItem) {
                            if (phyObj[i].indexOf('-100') > -1) {
                                element.mark = ''
                            } else if (phyObj[i].indexOf('-99') > -1) {
                                element.mark = '未测'
                            } else {
                                element.mark = phyObj[i]
                            }
                        }

                        if (i == element.physicalItem + 'Score') {
                            if (phyObj[i].indexOf('-100') > -1) {
                                element.score = ''
                            } else if (phyObj[i].indexOf('-99') > -1) {
                                element.score = ''
                            } else {
                                element.score = phyObj[i]
                            }
                        }
                    }
                });
                return phyArr;
            },
            // 体质数据详情
            getHealthInfo() {
                this.hasHeartRateData = false;
                this.hasSleepData = false;
                this.hasStepData = false;
                this.$axios.get('/jlp/admin/node/bracele/detail', {
                    params: {
                        studentId: this.studentId,
                        date: new Date(this.date).getTime()
                    }
                }).then(response => {
                    if (response.data.error == 10000) {
                        let sleepData = response.data.data.sleepData;
                        let heartRateData = response.data.data.heartRateData;
                        let pretime = new Date('2019/02/01 00:00').getTime();
                        let biaozhun = 36000;
                        if (JSON.stringify(sleepData) != "{}" && response.data.data.sleepPass != 2) {
                            // 有睡眠数据
                            this.hasSleepData = true;
                            this.sleepData = {
                                depthPercent: sleepData.depthPercent,
                                depthSleepTotal: new Date(pretime + sleepData.depthSleepTotal * 1000).format('hh小时mm分'),
                                depthSleepLen: (sleepData.depthSleepTotal / 36000) * 180 > 180 ? 180 : (sleepData.depthSleepTotal / 36000) * 180,
                                shallowSleepTotal: new Date(pretime + sleepData.shallowSleepTotal * 1000).format('hh小时mm分'),
                                shallowSleepLen: (sleepData.shallowSleepTotal / 36000) * 180 > 180 ? 180 : (sleepData.shallowSleepTotal / 36000) * 180,
                                sleepStartTime: sleepData.sleepStartTime ? new Date(sleepData.sleepStartTime).format('hh:mm:ss') : '',
                                sleepTotal: new Date(pretime + sleepData.sleepTotal * 1000).format('hh小时mm分'),
                                wakeUpCount: sleepData.wakeUpCount
                            }
                        }

                        if (JSON.stringify(heartRateData) != "{}" && response.data.data.heartRatePass != 2) {
                            // 有心率数据
                            this.hasHeartRateData = true;
                            this.heartRateData = heartRateData;
                            let backc = '';
                            let leftposition = 0;
                            if (heartRateData.averageHeartRate < 60) {
                                // 过缓
                                backc = 'back-slow';
                                leftposition = heartRateData.averageHeartRate / 60 * 90;
                            } else if (heartRateData.averageHeartRate > 200) {
                                // 过快
                                backc = 'back-fast';
                                leftposition = 180 + (heartRateData.averageHeartRate - 100) / 100 * 90;
                            } else {
                                // 正常
                                backc = 'back-normal';
                                leftposition = 90 + (heartRateData.averageHeartRate - 60) / 40 * 90;
                            }

                            this.backc = backc;
                            this.leftposition = leftposition;
                        }
                        if (response.data.data.stepPass != 2) {
                            // 有运动步数
                            this.hasStepData = true;
                            this.stepData = response.data.data.stepData;
                            this.toCanvas('sport-step', this.stepData, 1);
                        }
                    }
                })
            },
            toCanvas(id, progress, type) {
                // canvas进度条
                var canvas = document.getElementById(id),
                    ctx = canvas.getContext("2d"),
                    percent = progress, //最终百分比
                    circleX = canvas.width / 2, //中心x坐标
                    circleY = canvas.height / 2, //中心y坐标
                    radius = 100, //圆环半径
                    lineWidth = 15, //圆形线条的宽度
                    fontSize = 50; //字体大小

                // 画圆
                function circle(cx, cy, r) {
                    ctx.beginPath();
                    //ctx.moveTo(cx + r, cy);
                    ctx.lineWidth = lineWidth;
                    ctx.strokeStyle = '#ebebeb';
                    if (type) {
                        ctx.arc(cx, cy, r, Math.PI * 3 / 4, Math.PI * 11 / 4);
                    } else {
                        ctx.arc(cx, cy, r, Math.PI * 3 / 4, Math.PI * 1 / 4);
                    }

                    ctx.stroke();
                }

                // 画弧线
                function sector(cx, cy, r, startAngle, endAngle, anti) {
                    ctx.beginPath();
                    //ctx.moveTo(cx, cy + r); // 从圆形底部开始画
                    ctx.lineWidth = lineWidth;
                    if (endAngle > 7800 && endAngle < 8000) {
                        endAngle = 7800
                    }

                    // 渐变色 - 可自定义
                    var linGrad = ctx.createLinearGradient(
                        circleX - radius - lineWidth, circleY, circleX + radius + lineWidth, circleY
                    );
                    if (type) {
                        linGrad.addColorStop(0.0, '#FBD591');
                        linGrad.addColorStop(1.0, '#F8A941');
                    } else {
                        linGrad.addColorStop(0.0, '#91D5FF');
                        linGrad.addColorStop(1.0, '#40A9FF');
                    }

                    ctx.strokeStyle = linGrad;

                    // 圆弧两端的样式
                    ctx.lineCap = 'round';

                    // 圆弧
                    if (type) {
                        ctx.arc(
                            cx, cy, r,
                            (Math.PI * 3 / 4),
                            (Math.PI * 3 / 4) + endAngle / 8000 * (Math.PI * 8 / 4),
                            false
                        );
                    } else {
                        ctx.arc(
                            cx, cy, r,
                            (Math.PI * 3 / 4),
                            (Math.PI * 3 / 4) + endAngle / 120 * (Math.PI * 5 / 3),
                            false
                        );
                    }

                    ctx.stroke();
                }

                // 刷新
                function loading() {
                    if (process >= percent) {
                        clearInterval(circleLoading);
                    }

                    // 清除canvas内容
                    ctx.clearRect(0, 0, circleX * 2, circleY * 2);

                    // 中间的字
                    ctx.font = fontSize + 'px Impact';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillStyle = '#44ABFF';
                    ctx.fillText(parseFloat(percent).toFixed(0), circleX, circleY);

                    // 圆形
                    circle(circleX, circleY, radius);

                    // 圆弧
                    // 控制结束时动画的速度
                    if (process > 7900) {
                        process = percent;
                    } else if (process / percent > 0.90) {
                        process += 0.20 * percent / 10;
                    } else if (process / percent > 0.80) {
                        process += 0.5 * percent / 10;
                    } else if (process / percent > 0.70) {
                        process += 0.75 * percent / 10;
                    } else {
                        process += 1.0 * percent / 10;
                    }

                    sector(circleX, circleY, radius, Math.PI * 2 / 3, process);

                }

                var process = 0.0; //进度
                var circleLoading = window.setInterval(function () {
                    loading();
                }, 20);

            }
        }
    }
</script>
<style scoped>
    .acrate-top {
        position: relative;
        height: 35px;
    }

    .acrate-top .acrate-top-con {
        position: absolute;
        left: 0;
        width: 60px;
        line-height: 24px;
        text-align: center;
        color: #fff;
        z-index: 100;
        /* background-color: #40A9FF; */
    }

    .back-slow {
        background-color: #FFC069;
    }

    .back-normal {
        background-color: #40A9FF;
    }

    .back-fast {
        background-color: #F77976;
    }

    .sanjiao {
        position: absolute;
        bottom: -3px;
        left: 25px;
        width: 6px;
        height: 6px;
        /* background-color: #40A9FF; */
        z-index: 10;
        transform: rotate(45deg);
    }

    .acrate-middle {
        overflow: hidden;
        margin-bottom: 10px;
        margin-left: 30px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
    }

    .art-item {
        float: left;
        height: 30px;
        width: 90px;
        background-color: #40A9FF
    }

    .art-item:first-child {
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        background-color: #FFC069;
    }

    .art-item:last-child {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        background-color: #F77976;
    }

    .acrate-bottom {
        position: relative;
        margin-left: 30px;
        color: #707070;
    }

    .acrate-bottom span:nth-child(2) {
        position: absolute;
        top: 0;
        left: 82px;
    }

    .acrate-bottom span:nth-child(3) {
        position: absolute;
        top: 0;
        left: 168px;
    }

    .acrate-bottom span:nth-child(4) {
        position: absolute;
        top: 0;
        left: 246px;
    }

    /* **************8 */
    #health-info {
        min-width: 1180px;
    }

    .student-infos {
        overflow: hidden;
    }

    .head_name {
        padding-right: 20px;
        font-family: 'PingFangSC-Medium';
        color: #202020;
        font-size: 18px;
    }

    .stu-infoitem {
        float: left;
        /* width: 12.5%; */
        padding: 0 20px;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }

    .infos_head .fr {
        cursor: pointer;
        line-height: 40px;
    }

    .stu-infoitem:nth-child(2n+1) {
        background-color: #f7f7f8;
    }

    .stu-infoitem:nth-child(2n) {
        border-top: 1px solid #f7f7f8;
        border-bottom: 1px solid #f7f7f8;
        border-right: 1px solid #f7f7f8;
    }

    .infos_head {
        line-height: 30px;
        padding: 20px 15px;
    }

    .can-box {
        float: left;
        position: relative;
    }

    .phy-total {
        position: absolute;
        top: 50px;
        left: 98px;
        font-family: 'PingFangSC-Regular';
        font-size: 24px;
    }

    .phy-wave {
        position: absolute;
        bottom: 50px;
        left: 70px;
        width: 100px;
    }

    .phy-level {
        position: absolute;
        width: 130px;
        bottom: 25px;
        left: 55px;
        text-align: center;
    }

    .physcore-box {
        float: right;
        /* margin-left: 120px; */
        padding-top: 10px;
        width: calc(100% - 300px);
        /* min-width: 800px; */
        font-size: 0;
    }

    .mark-item {
        display: inline-block;
        box-sizing: border-box;
        width: 360px;
        height: 30px;
        line-height: 30px;
        font-size: 0;
        border-right: 1px solid #F7F7F8;
        border-bottom: 1px solid #F7F7F8;
        overflow: hidden;
    }

    .mark-item:nth-child(1),
    .mark-item:nth-child(2) {
        border-top: 1px solid #F7F7F8;
    }

    .mark-item:nth-child(2n + 1) {
        border-left: 1px solid #F7F7F8;
    }

    .mark-item div {
        display: inline-block;
        font-size: 16px;
    }

    .mark-item .mark-key {
        min-width: 160px;
        font-family: 'PingFangSC-Regular';
        box-sizing: content-box;
        text-align: center;
        border-right: 1px solid #F7F7F8;
        background-color: #F7F7F8;
    }

    .mark-value {
        padding-left: 15px;
    }

    /*  */
    .linehei {
        line-height: 32px;
    }

    /* .light-sleep-box{
        line-height: 36px;
    } */
    .light-sleep {
        display: inline-block;
        width: 100px;
        height: 20px;
        vertical-align: middle;
        background-image: linear-gradient(-90deg, #D3ADF7 0%, #B37FEB 100%);
        border-radius: 0px 100px 100px 0px;
    }

    .deep-sleep {
        display: inline-block;
        width: 180px;
        height: 20px;
        vertical-align: middle;
        background-image: linear-gradient(-90deg, #91D5FF 0%, #40A9FF 100%);
        border-radius: 0px 100px 100px 0px;
    }

    .color-gray {
        color: #707070;
    }

    .light-sleep-time {
        padding-left: 15px;
        color: #B37FEB;
    }

    .deep-sleep-time {
        padding-left: 15px;
        color: #40A9FF;
    }

    .sport-box {
        position: relative;
    }

    .sportstep-title {
        position: absolute;
        top: 60px;
        left: 85px;
        color: #707070;
    }

    .nodetaildata {
        line-height: 100px;
        text-align: center;
        padding-right: 60px;
    }
</style>